
import { Table, Popconfirm, Space, Card, Breadcrumb, Input, Cascader, message } from 'antd';
import { useEffect } from 'react';
import { useHistory } from 'react-router';

import { useCommodity } from "../../hook/commodity"
import { useAdd_info } from "../../hook/add_commodityImage"

import { useAssType } from "../../hook/ass_type";

const { Search } = Input;


export default () => {
    // 从hook中定义的组件中获取到暴露的数据和方法
    const [{ rows, total, curPage, eachPage }, { getCommodity, delCommodity, findCommodity, setCurPage, setEachPage, resComType }] = useCommodity();
    // 商品类型数据
    const [{
        ChildAll,
        TotalAll,
        assType
    }, { getassType, addAssTypeToReducer }] = useAssType()


    // 选择类型的函数
    async function onChangeType(_id, value) {
        const result = await resComType({ _id, Child_type: value[1] })
        console.log(result);
        result.ok === 1 ? message.success("修改类型成功") : message.error("修改类型失败")
    }

    // 存数据的hook
    const [{
        name, desc, guarantee, aftersale, storeCondition, place,
        specs, pack, sales, image,
    }, { addCommodityImage }] = useAdd_info()

    // 获取跳转核心对象，通过 history.push 方法实现页面跳转
    const history = useHistory();

    // 表头设置
    const columns = [
        {
            title: '商品名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '商品图片',
            dataIndex: 'image',
            key: 'image',
            render: (recored) => {
                if (recored.length != 0) {
                    return <img src={`/res/${recored[0]}`} style={{ height: 80, width: 60 }} />
                } else {
                    return <span style={{ color: "red" }}>该商品没有图片</span>
                }
            }
        },
        {
            title: '商品类型',
            key: 'Child_type',
            render: (text, record, index) => {
                const { _id, Child_type } = record
                const defvalue = Child_type ? [Child_type.childType_name] : ""
                return <Cascader defaultValue={defvalue} options={assType} onChange={(value) => onChangeType(_id, value)} placeholder="下拉选择所属类型" />
            }

        },
        {
            title: '保质期',
            dataIndex: 'guarantee',
            key: 'guarantee',

        },
        {
            title: '存储条件',
            dataIndex: 'storeCondition',
            key: 'storeCondition',

        },
        {
            title: '售后服务',
            dataIndex: 'aftersale',
            key: 'aftersale'
        },
        {
            title: '产地',
            dataIndex: 'place',
            key: 'place'
        },
        {
            title: '规格',
            dataIndex: 'specs',
            key: 'specs'
        },
        {
            title: '包装',
            dataIndex: 'pack',
            key: 'pack'
        },
        {
            title: '销量',
            dataIndex: 'sales',
            key: 'sales'
        },
        {
            title: '商品描述',
            dataIndex: 'desc',
            key: 'desc'
        },
        {
            title: '操作',
            dataIndex: 'option',
            key: 'option',
            render: (_, record) =>

                <Space>
                    <Popconfirm title="是否修改?" onConfirm={() => { sessionStorage.setItem('commodityData', JSON.stringify(record)); history.push('/info/editCommodity') }}>
                        <a>修改</a>
                    </Popconfirm>
                    <Popconfirm title="是否删除?" onConfirm={() => { delCommodity(record._id); getCommodity() }}>
                        <a>删除</a>
                    </Popconfirm>
                    <Popconfirm title="是否前往?" onConfirm={() => { sessionStorage.setItem('commodityData', JSON.stringify(record)); addInfoToRed(record) }}>
                        <a>商品图片</a>
                    </Popconfirm>
                </Space>
        }
    ];

    // 修改数据  添加到状态佳
    function addInfoToRed(record) {
        addCommodityImage(record)
        history.push("/info/uploadImgs")
    }

    // 可以获取到输入框的内容
    const onSearch = value => { findCommodity(value); };

    // 调用获取商品信息数据方法
    useEffect(() => {
        getCommodity();
    }, [getCommodity]);

    return (
        <Space direction="vertical" style={{ width: "100%" }}>
            <Card >
                <Breadcrumb>
                    <Breadcrumb.Item>主页</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="/#/info/commodity" style={{ fontSize: "16px", color: "black" }}>商品列表</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="/#/info/addcommodity" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>新增商品</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="/#/info/editcommodity" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>修改商品</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="/#/info/uploadImgs" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>上传商品图片</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
                <Search placeholder="请输入商品名称查找" onSearch={onSearch} disabled={false} style={{ width: 200, marginTop: "20px" }} />

            </Card>

            <Card>
                <Table
                    dataSource={rows}
                    columns={columns}
                    rowKey={(record) => record._id}
                    pagination={{
                        total,
                        showTotal:function(total){
                            return `总数：${total}`
                        },
                        position: ['bottomLeft'],
                        current: curPage,
                        pageSize: eachPage,
                        showQuickJumper: true,
                        showSizeChanger: true,
                        pageSizeOptions: ['2', '5', '10', '20'],
                        defaultPageSize: 5,
                        onChange: (curPage, eachPage) => {
                            setCurPage(curPage);
                            setEachPage(eachPage);
                        },
                    }} />
            </Card>
        </Space>

    )
}
